2-2 j埻z

本節說明 JavaScript 的是迴圈敘述(Loop Statement),這些敘述可以讓電腦反覆地執行某一段程式碼。

首先說明的是 for 迴圈敘述,其格式和 C 語言的 for 迴圈很類似,基本格式如下:

for ([指定一個計數變數的初值]; [測試式]; [更新計數變數的動作]) { 迴圈內部敘述 } for 敘述會指定一個計數變數的初值、一個條件式,以及一個會更新計數變數的動作。在每一次要執行迴圈之前,都會判斷條件式的值。如果條件式為真,迴圈裡的程式碼就會執行;反之,如果沒有通過,就不會執行,並直接跳到迴圈之後的第一行程式碼。在執行迴圈之後,就會進行更新這個計數變數的動作,然後再開始下一個迭代。下列範例使用 for 迴圈來印出 5 個依次變大的 「Hello world!」:

Example(forLoop01.htm):

上述範例的完整原始檔案如下:

原始檔(forLoop01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>由 for 迴圈來產生 5 個由小變大的  "Hello World!"</h2>
<hr>

<script>
// 由 for 迴圈來產生 5 個由小變大的  "Hello World!"
for (i=1; i<=5; i++) {
	document.write("Font size = " + i + " ===> ");
	document.write("<font color=green size=" + i + ">Hello World!</font><br>");
}
</script>

<hr>
</body>
</html>

JavaScript 提供另一種特殊類型的 for 迴圈,稱為 for-in 迴圈,可用於處理一個物件的所有屬性。在 for-in 迴圈中的計數變數是一個字串,而不是一個數字,此字串變數在每次迴圈代表一個特定的屬性名稱,因此我們可以使用此類迴圈,窮舉出一個物件的所有性質。舉例來說,每個網頁都有一個 document 物件來代表此網頁,因此在下列範例中,我們使用 for-in 迴圈來列舉 document 物件的所有性質:

Example(forInLoop01.htm):

在上述範例中,可以看出 document 有很多性質,例如 document.fileCreatedDate 代表網頁檔案的產生日期,document.bgColor 代表網頁的背景顏色等。上述範例的完整原始檔案如下:

原始檔(forInLoop01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用 for-in 迴圈來列舉 document 物件的屬性</h2>
<hr>

<script>
// 列舉 document 物件中的所有屬性
for (prop in document)
	document.write("<br>document." + prop + " = " + document[prop]);
</script>

<hr>
</body>
</html>

由上述程式碼也可以看出,我們可以使用 document.xyz 或 document["xyz"] 來存取屬性 xyz,得到的結果是相同的。

當然,我們也可以先建立一個物件,指定它的屬性和屬性值後,再用 for-in 迴圈將所有的屬性值列印出來,如下:

Example(forInLoop02.htm):

上述範例的完整原始檔案如下:

原始檔(forInLoop02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>for-in 迴圈</h2>
<hr>

<script>
// 建立具有一些屬性的物件。
student = new Object();
student.name = "Timmy";
student.age = "25";
student.phone = "575-1114";

// 列舉物件中的所有屬性
for (prop in student)
    document.write("<br>student." + prop + " = " + student[prop]);

</script>

<hr>
</body>
</html>

在上述範例中,prop 變數會被分別指定成字串 "name"、"age"、"phone",代表此物件的性質名稱,然後在經由 student[prop] 取得不同性質所對應的值。

另一個常用到的迴圈敘述是 while 迴圈,其用法類似 for 迴圈,基本格式為:

while (條件式) { 迴圈內部敘述 } 只要條件式為真,while 迴圈的內部敘述就會反覆一再被執行。在下列範例中,我們利用 while 迴圈來反覆印出隨機變數值,直到所遇到的隨機變數值大於 0.8 才停止:

Example(whileLoop01.htm):

上述範例的完整原始檔案 (whileLoop01.htm) 如下:

原始檔(whileLoop01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>while 迴圈</h2>
<hr>

<script>
x=Math.random();	// 產生一個介於 0 和 1 之間的亂數
while (x<=0.8) {
	document.write("<br>"+x);
	x=Math.random();
}
document.write("<br>"+x);
</script>

<hr>
</body>
</html>

另外還有一個和 while 功能類似的迴圈指令,稱為 do-while 迴圈,其基本格式如下:

do { 迴圈內部敘述 } while (條件式); while 迴圈是先判斷條件式,再決定是否執行迴圈內部敘述;而 do-while 迴圈是先執行迴圈內部敘述後,再判斷條件式,決定是否繼續執行迴圈,因此 do-while 迴圈至少會執行一次迴圈內部的程式碼。例如我們利用 do-while 迴圈來反覆上一個範例,程式碼會更簡化一些:

Example(whileLoop02.htm):

上述範例的完整原始檔案如下:

原始檔(whileLoop02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>do-while 迴圈</h2>
<hr>

<script>
do {
	x=Math.random();	// 產生一個介於 0 和 1 之間的亂數
	document.write("<br>"+x);
} while (x<=0.8);
</script>

<hr>
</body>
</html>

若要從迴圈中即刻跳出,可用 break 敘述,例如在前述印出亂數的範例中,我們可以改寫如下:

原始檔(whileLoop03.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>while 迴圈:break 的使用</h2>
<hr>

<script>
while (1) {
	x=Math.random();	// 產生一個介於 0 和 1 之間的亂數
	document.write("<br>"+x);
	if (x>0.8)
		break;
}
</script>

<hr>
</body>
</html>

在另一種情況下,我們可能需要結束此次迴圈的執行,並立刻跳至下一個迴圈的開始位置來執行,此功能可由 continue 來達成。例如,在處理 100 個亂數時,若我們只想印出數值大於 0.95 的亂數,可由下列程式碼達成(whileLoop04.htm):

原始檔(whileLoop04.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>for 迴圈:continue 的使用</h2>
<hr>

<script>
for (i=0; i<100; i++) {
	a=Math.random();	// 產生一個介於 0 和 1 之間的亂數
	if (a<=0.95)
		continue;
	document.write("<br>"+a);
}
</script>

<hr>
</body>
</html>


JavaScript 程式設計與應用:用於網頁用戶端